<template>
  <div class="userList">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>注册用户列表</span>
      </div>
      <div class="table-holder">
        <!-- 用户展示表格 -->
        <el-table :data="userList" border style="width: 100%">
          <el-table-column fixed="left" type="index" label="#" width="50" />
          <el-table-column prop="username" label="用户名" width="150" />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img class="avatar" :src="scope.row.icon" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="150" />
          <el-table-column prop="realname" label="真实姓名" width="150" />
          <el-table-column label="性别" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.sex === 0">男</span>
              <span v-else>女</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="200" />
          <el-table-column prop="email" label="邮箱" width="200" />
          <el-table-column prop="birthday" label="生日" width="200" />
          <el-table-column prop="createTime" label="注册时间" width="200" />
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination-holder">
        <el-pagination
          :current-page="page.start"
          :page-sizes="page.pageSize"
          :page-size="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  requestUserList
} from '@/api/user'
import mixin from '@/mixins/index'
export default {
  mixins: [mixin],
  data() {
    return {
      userList: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 改变每页数量
    handleSizeChange(val) {
      this.page.limit = val
      this.getData()
    },
    // 改变页码
    handleCurrentChange(val) {
      this.page.start = val
      this.getData()
    },
    // 获取用户数据
    getData() {
      requestUserList(this.page).then(res => {
        console.log(res)
        this.page.total = res.data.total
        this.userList = res.data.rows
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userList{
  .avatar{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
</style>
